import React from 'react';
import { connect, mapProps } from '@formily/react';
import { getEditor } from '@inbiz/utils';
import classNames from 'classnames';
import './index.less';

export interface IContainerProps {
  className?: string;
  style?: React.CSSProperties;
  prefixCls?: string;
  clickable?: boolean;
}

type ComposeFormItem = React.FC<IContainerProps> & {
  BaseItem?: React.FC<IContainerProps>;
};

const BaseItem: React.FC<IContainerProps> = (props) => {
  const { clickable, ...otherProps } = props;
  const isPreventClick = clickable == true ? false : getEditor();
  if (!getEditor()) {
    delete otherProps['data-designer-node-id'];
  }
  return React.createElement(
    'div',
    {
      ...otherProps,
      className: classNames(
        'inbiz-decorator-container',
        {
          'inbiz-decorator-container-edit-view': isPreventClick,
        },
        props.className,
      ),
      style: {
        ...props.style,
        position: 'relative',
      },
    },
    props.children,
  );
};

const Container: ComposeFormItem = connect(
  BaseItem,
  mapProps((state) => ({ ...state })),
);

Container.BaseItem = BaseItem;

export default Container;
